<template>
	<!-- 少多语言 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff':''">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					<!-- {{coinType}} {{i18n.p001}} -->
					{{i18n10.n043}}
				</view>
				<!-- <view class="flex-1 text-alignR A-Medium record" :class="model=='light'?'recordLight':''">
					<view @click="$tool.navTo('/pages/property/chongzhijilu')" class="pr-3">
						{{i18n.p002}}
					</view>
				</view> -->
				<view class="flex-1 f0 pr-3 flex justify-end">
					<image @click="$tool.navTo('/pages/property/chongzhijilu')" style="width: 56rpx;height: 56rpx;" :src="'/static/images/syjl_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view style="height: 24rpx;">

		</view>
		<view @click="$refs.czPoups.open()" class="topList py-4 mx-3 A-Medium flex align-center justify-between" :class="model=='light'?'topListLight':''">
			<view class="flex align-center">
				<view class="f0 mr-1">
					<image v-if="type==1" style="width: 40rpx;height: 40rpx;" src="/static/images/trade/17.png" mode=""></image>
					<image v-if="type==2" style="width: 40rpx;height: 40rpx;" src="/static/images/trade/18.png" mode=""></image>
					<image v-if="type==3" style="width: 40rpx;height: 40rpx;" src="/static/images/trade/19.png" mode=""></image>
				</view>
				<view class="title">
					{{coinType}}
				</view>
			</view>
			<view class="flex align-center">
				<view class="desc">
					{{i18n10.n005}}
				</view>
				<view class="f0">
					<image style="width: 40rpx;height: 40rpx;" :src="'/static/images/rightArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 充币网络 -->
		<view class="topTitle mt-3 A-Medium ml-3" :class="model=='light'?'topTitleLight':''">
			<!-- {{i18n.p003}} -->
			{{i18n10.n044}}
		</view>
		<view class="nameList ml-3 flex align-center A-Medium" :class="model=='light'?'nameListLight':''">
			<view class="mr-4 flex align-center justify-center" @click="coinNetwork=item.value"
				:class="coinNetwork==item.value?'item1':'item'" v-for="(item,index) in nameList">
				{{item.title}}
			</view>
		</view>
		<!-- 充币地址 -->
		<view class="topTitle mt-3 A-Medium ml-3" :class="model=='light'?'topTitleLight':''">
			<!-- {{i18n.p003}} -->
			{{i18n10.n045}}
		</view>
		<view class="recordWrap mt-3 mx-3 pb-4 flex flex-column align-center" style="background: unset;border: unset;" :class="model=='light'?'recordWrapLight':''">
			<view v-if="txInfo" class="f0">
				<image style="width: 280rpx;height: 282rpx;" :src="$tool.changeImg(txInfo[coinType+coinNetwork].img)" mode=""></image>
			</view>
			<view v-if="txInfo" class="text2">
				{{txInfo[coinType+coinNetwork].code}}
			</view>
			<view v-if="txInfo" @click="copy(txInfo[coinType+coinNetwork].code)" class="flex align-center">
				<view class="f0 mr-1">
					<image style="width: 32rpx;height: 32rpx;" :src="'/static/images/mine/1_'+model+'.png'" mode="">
					</image>
				</view>
				<view class="text3">
					{{i18n.p005}}
				</view>
			</view>
		</view>
		<!-- 充值金额 -->
		<view class="formWrap mt-4 px-3 A-Regular">
			
			<view class="formTitle">
				<!-- {{i18n.p006}} -->
				{{i18n10.n046}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input type="text" v-model="money" :placeholder="i18n10.n047" class="flex-1 inputText A-Medium"
					:class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium',model=='light'?'placeholderClassLight':''">
			</view>
		</view>
		<!-- 上传凭证 -->
		<view class="formWrap mt-4 px-3 A-Regular">
			<view class="formTitle">
				<!-- {{i18n.p007}} -->
				{{i18n10.n048}}
			</view>
			<view @click="openPopup" v-if="!paymentVoucher" class="pz flex flex-column align-center justify-center"
				:class="model=='light'?'pzLight':''">
				<view class="f0">
					<image style="width: 37rpx;height: 37rpx;" :src="'/static/images/add_'+model+'.png'" mode="">
					</image>
				</view>
			</view>
			<view @click="openPopup" v-else class="f0">
				<image style="width: 128rpx;height: 128rpx;" :src="$tool.changeImg(paymentVoucher)" mode=""></image>
			</view>
		</view>
		<view class="recordWrap mt-4 A-Regular mx-3 py-4 px-3"
			:class="model=='light'?'recordWrapLight':''">
			<view class="text4 A-Medium" :style="model=='light'?'color: #cc0003;':'color: #cc0003;'">
				{{i18n.p010}}：
			</view>
			<view class="text6" style="margin-top: 14rpx;">
				<!-- 1.{{i18n10.n049}}{{coinType=="USDT"?'USDT-ERC20':coinType=="BTC"?'BTC-BITCION':coinType=="ETH"?'ETH-ERC20':''}}{{i18n10.n050}}<br> -->
				1.{{i18n10.n049}}{{coinType}}-{{coinNetwork}}{{i18n10.n050}}<br>
				2.{{i18n10.n051}}<text style="color: #cc0003;">{{coinType=="USDT"?'10USDT':coinType=="BTC"?'0.001BTC':coinType=="ETH"?'0.001ETH':''}}</text>{{i18n10.n052}}<br> 
				3.{{i18n10.n053}}<br> 
				4.{{i18n10.n054}}<br>
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="" style="position: fixed;bottom: 0;width: 100%;padding-top: 24rpx;height: 180rpx;background: #0E0F11;" :style="model=='light'?'background:#fff':''">
			<view @click="submit" class="btn mx-auto A-Medium clickCss">
				{{i18n.p052}}
			</view>
		</view>
		<view class="" style="height: 210rpx;">
		
		</view>
		
		<view class="" style="height: 30rpx;">

		</view>
		<!-- 上传头像弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popupWrap pt-1 pb-2 A-Medium" :class="model=='light'?'popupWrapLight':''">
				<view @click="confirm(item)" v-for="(item,index) in popupList" :style="index==2?'border:none;':''"
					class="list py-3" :class="model=='light'?'listLight':''">
					{{item.name}}
				</view>
			</view>
		</uni-popup>
		<czPoup ref="czPoups" :type="1" @confirm="czConfirm"></czPoup>
	</view>
</template>

<script>
	import {
		rechargeAdd,
		getCoinNetworkList,
		rechargeQrcodeList
	} from '@/core/api/index.js';
	import czPoup from '@/components/czPoup.vue';
	export default {
		components: {
			czPoup
		},
		data() {
			return {
				type: 1,
				coinNetwork: '',
				// nameList: ['TRC20', 'ERC20'],
				nameList: [],
				coinType: '',
				paymentVoucher: '',
				money: '',
				popupList: [{
					id: 1,
					name: ''
				}, {
					id: 2,
					name: ''
				}, {
					id: 3,
					name: ''
				}, ],
				txInfo:'',
				isSubmit:false,
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.coinType = "USDT";
			if (this.type == 1) {
				this.coinType = 'USDT';
			}
			if (this.type == 2) {
				this.coinType = 'BTC';
			}
			if (this.type == 3) {
				this.coinType = 'ETH';
			}
			// if(options.type==2){
			// 	this.nameList = ['OIMI'];
			// }
			// if(options.type==3){
			// 	this.nameList = ['ERC20'];
			// }
			this.getCoinNetworkLists();
			this.initDate();
			this.rechargeQrcodeLists();
			
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			this.$store.dispatch('config/getCustomerInfo');
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		computed: {
			i18n() {
				return this.$t('property');
			},
			i18n2() {
				return this.$t('showToast');
			},
			i18n3() {
				return this.$t('mine');
			},
			i18n4() {
				return this.$t('last');
			},
			i18n10() {
				return this.$t('newObj');
			},
			passportAuthStatus() {
				return this.$store.state.config.passportAuthStatus;
			},
			model() {
				return this.$store.state.config.model;
				// return 'light'
			}
		},
		methods: {
			rechargeQrcodeLists(){
				rechargeQrcodeList({
					pageNo:1,
					pageSize:100
				}).then(res=>{
					console.log(res,'cs-----------cs');
					let list = res.result.records;
					let obj = {
						
					}
					for(let i=0;i<list.length;i++){
						obj[list[i].coinType+list[i].coinNetwork] = {
							img:list[i].qrcodeImg,
							code:list[i].networkAddress
						}
					}
					this.txInfo = obj;
				})
			},
			getCoinNetworkLists(){
				getCoinNetworkList({
					coinType: this.coinType
				}).then(res => {
					this.nameList = res.result;
					this.coinNetwork = this.nameList[0].value;
				})
			},
			czConfirm(item) {
				console.log(item,'cs');
				this.type = item.id;
				this.coinType = item.value;
				this.money = '';
				this.getCoinNetworkLists();
				this.rechargeQrcodeLists();
			},
			submit() {
				if(!this.validateAmount(this.money)){
					return this.$tool.showToast(this.i18n10.n155);
				}
				// if (this.passportAuthStatus == 1) {
				// 	// 审核中
				// 	return;
				// }
				// if (this.passportAuthStatus == 2) {
				// 	// 审核失败
				// 	return;
				// }
				// if (this.passportAuthStatus == 3) {
				// 	// 审核成功
				// 	return;
				// }
				if (this.money === '') return this.$tool.showToast(this.i18n10.n047);
				if (this.paymentVoucher === '') return this.$tool.showToast(this.i18n2.st020);
				this.$tool.showLoading();
				if(this.isSubmit){
					return;
				}else{
					this.isSubmit = true;
				}
				rechargeAdd({
					mobileUserId: uni.getStorageSync('mobileUserId'),
					coinNetwork: this.coinNetwork, //链名称
					coinType: this.coinType, //	币种
					paymentVoucher: this.paymentVoucher,
					rechargeAmount: this.money,
				}).then(res => {
					uni.hideLoading();
					this.$tool.showToast(this.i18n2.st022);
					setTimeout(res => {
						this.$tool.goBack();
					}, 800)
				}).catch(err => {
					this.isSubmit = false;
					uni.hideLoading();
				})
			},
			openPopup() {
				this.$refs.popup.open('bottom');
			},
			closePopup() {
				this.$refs.popup.close();
			},
			confirm(item) {
				this.closePopup();
				if (item.id == 1 || item.id == 2) {
					this.$tool.uploadImg({
						count: 1
					}, item.id).then(res => {
						uni.hideLoading();
						console.log(res[0], 'cs');
						this.paymentVoucher = res[0];
					})
				}
			},
			initDate() {
				for (let i = 0; i < this.popupList.length; i++) {
					this.popupList[i].name = this.i18n3['m0' + (i + 44)];
				}
			},
			copy(e) {
				uni.setClipboardData({
					data: e,
					success: res => {
						this.$tool.showToast(this.i18n2.st019)
					}
				});
			},
			validateAmount(value, decimals = 6) {
			    // 空值校验
				if (!value) return false;
				
				// 转为字符串处理
				const strValue = value.toString();
				
				// 金额格式正则
				// ^[1-9]\d*$ 匹配大于0的整数
				// ^0$ 匹配0
				// ^[1-9]\d*\.\d{1,2}$ 匹配小数(小数位数可通过decimals参数控制)
				// ^0\.\d{1,2}$ 匹配以0开头的小数
				const regExp = new RegExp(`^(([1-9]\\d*)|0)(\\.\\d{1,${decimals}})?$`);
				
				return regExp.test(strValue);
			}
		}
	}
</script>

<style scoped lang="scss">
	.topList {
		border-bottom: 2rpx solid #2D2D2E;
		.title {
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.desc {
			font-size: 28rpx;
			color: #7F838D;
		}
	}
	.topListLight {
		border-bottom: 2rpx solid #F4F4F4;
		.title {
			color: #0E0F11;
		}
	}
	// 弹窗---开始
	.popupWrap {
		background: #0E0F11;
		font-size: 32rpx;
		color: #F7F7F7;

		.titleWrap {
			margin-bottom: 6rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.list {
			text-align: center;
			border-bottom: 2rpx solid #1F2128;
		}

		.listLight {
			border-bottom: 2rpx solid #F4F4F4;
		}
	}

	.popupWrapLight {
		background: #ffffff;
		color: #0E0F11;
	}

	// 弹窗---结束
	.record {
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.recordLight {
		color: #0E0F11;
	}

	.topTitle {
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.topTitleLight {
		color: #0E0F11;
	}

	.nameList {
		margin-top: 24rpx;

		.item {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #1F2128;
			font-size: 28rpx;
			color: #AAACB8;
		}

		.item1 {
			width: 144rpx;
			height: 60rpx;
			background: #16181C;
			border-radius: 12rpx;
			border: 2rpx solid #7F838D;
			font-size: 28rpx;
			color: #F7F7F7;
		}
	}

	.nameListLight {
		.item {
			background: #FFFFFF;
			border: none;
		}

		.item1 {
			background: #5951BA;
			border: none;
		}
	}

	.recordWrap {
		// margin-top: 104rpx;

		.text1 {
			font-size: 24rpx;
			color: #7F838D;
			margin-top: 44rpx;
			margin-bottom: 46rpx;
		}

		.text2 {
			font-size: 22rpx;
			color: #7F838D;
			margin-top: 42rpx;
			margin-bottom: 32rpx;
		}

		.text3 {
			font-size: 24rpx;
			color: #AAACB8;
		}

		.text4 {
			font-size: 24rpx;
			color: #F7F7F7;
		}

		.text5 {
			font-size: 20rpx;
			color: #EBAC00;
		}

		.text6 {
			font-size: 22rpx;
			color: #7F838D;
		}
	}

	.recordWrapLight {}

	.formWrap {
		.pz {
			width: 128rpx;
			height: 128rpx;
			background: #16181C;
			border-radius: 12rpx;
		}

		.pzLight {
			background: #D8DAE2;
		}

		.formTitle {
			font-size: 28rpx;
			color: #7F838D;
			margin-bottom: 22rpx;
		}

		.inputWrap {
			width: 690rpx;
			height: 88rpx;
			background: #16181C;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-bottom: 35rpx;

			.area {
				font-size: 28rpx;
				color: #AAACB8;
			}

			.areaLight {
				color: #7F838D;
			}

			.inputText {
				font-size: 28rpx;
				color: #F7F7F7;
				// text-align: right;
			}

			.inputTextLight {
				color: #0E0F11;
			}

			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
			}

			.placeholderClassLight {
				color: #B5B7BF;
			}

			.img1 {
				width: 15rpx;
				height: 11rpx;
				margin-left: 16rpx;
				margin-right: 42rpx;
			}

			.img2 {
				width: 40rpx;
				height: 40rpx;
			}

			.codeText {
				font-size: 28rpx;
				color: #5951BA;
			}
		}

		.inputWrapLight {
			background: #FFFFFF;
		}

		.forgetPass {
			font-size: 28rpx;
			color: #5951BA;
		}
	}

	.btn {
		width: 650rpx;
		height: 80rpx;
		background: #5951BA;
		border-radius: 74rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}
</style>